<!-- 
  @description: 侧边导航栏
-->
<template>
  <div class="navigate-dv">
    <div class="avatar-dv">
      <el-avatar>
        <img src="../../assets/img/avatar-boji.jpg" />
      </el-avatar>
    </div>
    <div class="nav-list">
      <div
        class="nav-item"
        :class="{ 'is-active': item.name === activeName }"
        v-for="(item, index) of navList"
        :key="index"
        @click="changeItem(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { NavItem } from '../../types/Navigate.js'

let activeName = ref('待办')
let navList: NavItem[] = reactive([
  {
    name: '待办',
    path: '/',
  },
  {
    name: '导航',
    path: '/index',
  },
])

const emit = defineEmits<{
  (e: 'changeRoute', value: NavItem): void
}>()

function changeItem(item: NavItem) {
  activeName.value = item.name
  emit('changeRoute', item)
}
</script>

<style lang="less" scoped>
.navigate-dv {
  height: 100vh;
  width: 80px;
  // display: flex;
  // justify-content: center;
  // flex-wrap: wrap;
  background-color: #333333;
  position: absolute;
  opacity: 0.7;
  right: 0;
  top: 0;
}

.avatar-dv {
  height: 100px;
  .fl();
}

.nav-list {
  width: 100%;
}
.nav-item {
  width: 100%;
  height: 60px;
  color: #f2f3f5;
  transition: all 0.2s ease-in-out;
  .fl();

  &:hover {
    cursor: pointer;
    background-color: #777;
  }
}

.is-active {
  background-color: #aaa;
  color: #101010;
  font-weight: bold;
}
</style>
